<template>
	<view class="f-f-c">
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#000'
		:titleStyle="{ color: '#000'}"
		 title="意见反馈" rightText='' :border="false" :placeholder="true">
			 <!-- #ifdef APP -->
			 
			 <!-- #endif -->
		</u-navbar>
	    <view class="p20">
	    	<view class="f">
	    		{{dataDay}} <u-icon @click="show = true" name="arrow-down" color="#666" size="16"></u-icon>
	    	</view>
			<view class="p20 mt20 b-rd b-s c6">
				<view class="f-s-b">
					<span>状态</span>
					<span>已解决</span>
				</view>
				<view class="f-s-b b-b pt20 pb20">
					<span>反馈时间</span>
					<span>2021-10-08</span>
				</view>
				<view class="f-s-b  pt20 pb20">
					<span class="q">问</span>
					<span>123456</span>
				</view>
				<view class="f-s-b   pb20">
					<span class="a">答</span>
					<span>123456</span>
				</view>
			</view>
	    </view>
		 <u-datetime-picker
				:show="show"
				v-model="date"
				mode="date"
				@close='close'
				@confirm='confirm'
				@cancel='close'
		></u-datetime-picker>
	</view>
</template>


<script>
	
	export default {
		data() {
			return {
				list1:['https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/banner.png'],
				show:false,
				date:'',
				dataDay:'2023年10月',
			}
		},
		 
		filters: {
		//过滤器 用于格式化时间
		
	    },
		methods: {
			close(){
				this.show = false
			},
			confirm(e){
				this.show = false
				console.log(e.value,'this.date')
				this.dataDay = this.dateFormat(e.value)
			},
			dateFormat(value) {
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "年" + month + '月'
				
				// var result = year + "-" + month + "-" + sdate + ' ' + hour + ':' + minute + ':' + second
				// 返回
				return result;
			   },
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		min-height: 50%;
		background-color: #f8f8f8;
	}

	.bg1,.bg2,.bg3,.bg4{
		width: 338rpx;
		height: 164rpx;
		background: none;
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c1.png');
		background-size: 100% 100%;
		/* box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0,0,0,0.1); */
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
	}
	.bg2{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c2.png');
	}
	.bg3{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c3.png');
	}
	.bg4{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c4.png');
	}
	.btn{
		width: 700rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #31EB8D 0%, #4CC097 100%);
		box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	
	}
	.q{
		width: 40rpx;
		height: 40rpx;
		background: #1AC388;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		padding: 8rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
	}
	.a{
		width: 40rpx;
		height: 40rpx;
		background: #7968FE;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		padding: 8rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
	}
	
</style>
